import React, { Component } from 'react'
import { Row, Col } from 'antd';
// import axios from '../../axios'
import axios from 'axios';
import './index.less'
import Util from '../../utils/utils'
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '超哥'
        }
        setInterval(() => {
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        }, 1000)
        this.getWeatherAPIData();
    }
    getWeatherAPIData() {
        let city = '北京';
        axios.get('http://www.chinayabisi.com/tools/gettianqi.ashx?city='+encodeURIComponent(city))
            .then((response) => {
                console.log(response);
                let data = response.data.results[0].weather_data[0];
                      
                        this.setState({
                            dayPictureUrl:data.dayPictureUrl,
                            weather:data.weather
                        })
            })
            .catch(function (error) {
                console.log(error);
            });
        // axios.jsonp({
        //     // url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
        //     url:'http://www.chinayabisi.com/tools/gettianqi.ashx?city='+encodeURIComponent(city)
        // }).then((res)=>{
        //     if(res.status == 'success'){
        //         let data = res.results[0].weather_data[0];
        //         console.log(data)
        //         this.setState({
        //             dayPictureUrl:data.dayPictureUrl,
        //             weather:data.weather
        //         })
        //     }
        // })
    }
    render() {
        return (
            <div className="header">
                <Row className="header-top">
                    <Col span={24}>
                        <span>欢迎,{this.state.name}</span>
                        <a href="#">退出</a>
                    </Col>
                </Row>
                <Row className="breadcrumb">
                    <Col span={4} className="breadcrumb-title">首页</Col>
                    <Col span={20} className="weather">
                        <span className="date">{this.state.sysTime}</span>
                        <span className="weather-img">
                                    <img src={this.state.dayPictureUrl} alt="" />
                                </span>
                                <span className="weather-detail">
                                    {this.state.weather}
                                </span>
                    </Col>
                </Row>
            </div>
        )
    }
}
export default Header;